<script setup>
import {useConfig, useCollapsed} from "~/store"
import {isDark} from '~/composables'

const $config = useConfig()

const layout_content_wrapper_background = ref($config.value.layout.background)
const layout_sider_wrapper_background = ref($config.value.layout.sider.background)

const layout_pages_wrapper_height = ref(`${$config.value.layout.pages}px`)
const layout_header_wrapper_height = ref(`${$config.value.layout.header}px`)
const layout_footer_wrapper_height = ref(`${$config.value.layout.footer}px`)

const layout_router_view_margin_bottom = ref('10px');
const layout_router_view_wrapper_min_height = ref(`calc(100vh - ${$config.value.layout.header}px - ${$config.value.layout.footer}px - ${$config.value.layout.pages}px - ${layout_router_view_margin_bottom.value})`)
const layout_content_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px - ${$config.value.layout.pages - 1}px)`)
const layout_content_container_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px)`)

const $collapsed = useCollapsed()
const collapsedOnUpdate = (e) => {
  $collapsed.value = e
}
</script>
<template>
  <n-layout has-sider class="layout_header_container_wrapper">
    <n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
                    collapse-mode="width" :collapsed-width="$config.layout.sider.close"
                    :width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
                    :native-scrollbar="false" bordered>
      <Logo></Logo>
    </n-layout-sider>
    <n-layout>
      <n-layout-header class="layout_header_wrapper" bordered>
        <n-button ml-5 text @click="collapsedOnUpdate(!$collapsed)">
          <div class="collapse_icon_wrapper"
               :class="[$collapsed?'i-ic-round-menu-open':'i-ic-round-menu']"></div>
        </n-button>
        <Breadcrumb></Breadcrumb>
        <User></User>
      </n-layout-header>
    </n-layout>
  </n-layout>
  <n-layout has-sider class="layout_content_container_wrapper">
    <n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
                    collapse-mode="width" :collapsed-width="$config.layout.sider.close"
                    :width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
                    :native-scrollbar="false" bordered>
      <Menu></Menu>
    </n-layout-sider>
    <n-layout :class="[isDark?'':'layout_content_background']">
      <Pages v-if="$config.layout.pages >= 40"></Pages>
      <n-layout position="absolute" :native-scrollbar="false" class="layout_content_wrapper">
        <div class="layout_router_view_wrapper" px-2>
          <router-view v-slot="{ Component }">
            <component :is="Component"/>
          </router-view>
        </div>
        <n-layout-footer class="layout_footer_wrapper" text="xs center gray-500" bordered>
          <span>{{ $config.version.desc }}</span>
          <span mx-3>{{ $config.version.version }}</span>
          <span>{{ $config.version.date }}</span>
        </n-layout-footer>
      </n-layout>
    </n-layout>
  </n-layout>
</template>
<style scoped>
.layout_content_container_wrapper {
  height: v-bind(layout_content_container_wrapper_height);
}

.layout_header_container_wrapper {
  height: v-bind(layout_header_wrapper_height);
}

.layout_header_wrapper {
  position: relative;
  height: v-bind(layout_header_wrapper_height);
  display: flex;
  align-items: center;
}

.layout_sider_background {
  background: v-bind(layout_sider_wrapper_background);
}

.layout_content_background {
  background: v-bind(layout_content_wrapper_background);
}

.collapse_icon_wrapper {
  font-size: 20px;
}

.layout_footer_wrapper {
  line-height: v-bind(layout_footer_wrapper_height);
  height: v-bind(layout_footer_wrapper_height);
}

.layout_content_wrapper {
  top: v-bind(layout_pages_wrapper_height);
  background: #00000000;
  height: v-bind(layout_content_wrapper_height);
  overflow: hidden;
}

.layout_router_view_wrapper {
  min-height: v-bind(layout_router_view_wrapper_min_height);
  overflow: hidden;
  margin-bottom: v-bind(layout_router_view_margin_bottom);
}
</style>
